<% filter_taxons = filter_taxons_for_taxonomy(taxonomy) %>

<% if filter_taxons.any? %>
  <div
    class="st-accordion"
    data-controller='accordion'
    data-accordion-close-others-value="false">
    <%= link_to "#taxonomy_filter_#{taxonomy.id}", class: "cursor-pointer uppercase flex items-center justify-between h-10 px-4 lg:px-10 text-sm tracking-widest focus:outline-none transition duration-150 ease-in-out #{'st-accordion__icon--opened' if params[:filter].nil? || current_taxon.present? || permitted_products_params.dig(:filter, :taxonomy_ids, taxonomy.id.to_s, :taxon_ids).present?}", data: { action: 'accordion#toggle:prevent' } do %>
      <%= taxonomy.name %>
      <%= render 'spree/shared/icons/chevron_down' %>
    <% end %>
    <div
      class='st-accordion__content'
      data-accordion-id="taxonomy_filter_<%= taxonomy.id %>"
      data-controller="searchable-list">
      <div class="relative mt-3 mx-4 lg:mx-10">
        <%= f.search_field :search,
          class: "w-full bg-accent focus:ring-primary focus:border-primary pl-10 border-none",
          placeholder: Spree.t(:search),
          data: { searchable_list_target: "input" } %>
        <span class="absolute left-0 top-0 flex items-center h-full pl-3">
          <%= render 'spree/shared/icons/search' %>
        </span>
      </div>
      <% first_taxons, rest_of_the_taxons = filter_taxons.partition.with_index { |_, i| i < 5 } %>
      <ul class="flex flex-col px-4 lg:px-10 mt-3">
        <% first_taxons.each do |taxon| %>
          <li>
            <%= f.label "filter_taxon_#{taxon.id}", class: "flex items-center gap-2 cursor-pointer group text-sm h-10", data: { searchable_list_target: "item", text: taxon.name } do %>
              <%= f.check_box "filter[taxonomy_ids][#{taxonomy.id}][taxon_ids][]",
                {
                  id: "filter_taxon_#{taxon.id}",
                  checked: permitted_products_params.dig(:filter, :taxonomy_ids, taxonomy.id.to_s, :taxon_ids)&.include?(taxon.id.to_s),
                  class: "input-checkbox group-focus-within:outline"
                },
                taxon.id,
                nil %>
              <%= taxon.name %>
              <span class="opacity-50">
                (<%= products_count_for_taxon(taxon) %>)
              </span>
            <% end %>
          </li>
        <% end %>
      </ul>

      <% if filter_taxons.size > 5 %>
        <ul class='st-accordion__content flex flex-col' data-accordion-id="more_taxonomy_filter_<%= taxonomy.id %>">
          <% rest_of_the_taxons.each do |taxon| %>
            <li class="px-4 lg:px-10">
              <%= f.label "filter_taxon_#{taxon.id}", class: "flex items-center gap-2 cursor-pointer group text-sm h-10", data: { searchable_list_target: "item", text: taxon.name } do %>
                <%= f.check_box "filter[taxonomy_ids][#{taxonomy.id}][taxon_ids][]",
                  {
                    id: "filter_taxon_#{taxon.id}",
                    checked: permitted_products_params.dig(:filter, :taxonomy_ids, taxonomy.id.to_s, :taxon_ids)&.include?(taxon.id.to_s),
                    class: "input-checkbox group-focus-within:outline"
                  },
                  taxon.id,
                  nil %>
                <%= taxon.name %>
                <span class="opacity-50">
                  (<%= products_count_for_taxon(taxon) %>)
                </span>
              <% end %>
            </li>
          <% end %>
        </ul>
        <%= link_to Spree.t(:show_all), "#more_taxonomy_filter_#{taxonomy.id}",
          class: "flex justify-between w-full st-accordion__icon text-sm font-semibold uppercase px-4 lg:px-10 #{'st-accordion__icon--opened' if permitted_products_params.dig(:filter, :taxon_ids)&.present?} mt-3",
          data: {
            action: 'accordion#toggle:prevent',
            accordion_opened_text_param: Spree.t(:show_less),
            accordion_closed_text_param: Spree.t(:show_all)
          } %>
      <% end %>
    </div>
  </div>
<% end %>
